<template>
  <div>
    <div class="toplist">
      <div class="sd3">
        <div class="minelst">
          <h2>云音乐特色榜</h2>
          <ul class="f-cb">
            <li :class="item.id==songId?'bg-active':''" v-for="(item,i) in ChineseTop" :key="item.id"
                @click="toDetail(item.id)">
              <div class="item">
                <div class="left">
                  <img v-lazy="item.coverImgUrl" alt="">
                </div>
                <p class="up">{{ item.name }}</p>
                <p>{{ item.updateFrequency }}</p>
              </div>
            </li>
          </ul>
        </div>
        <div class="minelst">
          <h2>全球媒体榜</h2>
          <ul class="f-cb">
            <li :class="item.id==songId?'bg-active':''" v-for="item in OtherTop" :key="item.id"
                @click="toDetail(item.id)">
              <div class="item">
                <div class="left">
                  <img v-lazy="item.coverImgUrl" alt="">
                </div>
                <p class="up">{{ item.name }}</p>
                <p>{{ item.updateFrequency }}</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="yd3">
        <div class="g-wrap">
          <div class="u-cover-rank">
            <img :src="playList.coverImgUrl" alt="">
            <span></span>
          </div>
          <div class="m-info">
            <div class="hd">
              <h2>{{ playList.name }}</h2>
            </div>
            <div class="user">
              <i></i>
              <span class="day">最近更新：09月05日</span>
              <span>(更新73首)</span>
            </div>
            <div class="btns">
              <a href="javascript:;" class="ply" @click.prevent="addList(playList.tracks)">
                <i class="ply">
                  <em class="ply"></em>
                  播放
                </i>
              </a>
              <a href="javascript:;" class="ply"></a>
              <a href="javascript:;">
                <i class="ply">({{ playList.subscribedCount }})</i>
              </a>
              <a href="javascript:;">
                <i class="ply">({{ playList.shareCount }})</i>
              </a>
              <a href="javascript:;">
                <i class="ply">下载</i>
              </a>
              <a href="javascript:;">
                <i class="ply">({{ playList.commentCount }})</i>
              </a>
            </div>
          </div>
        </div>
        <div class="g-wrap12">
          <div class="title" v-if="playList.tracks">
            <h1>歌曲列表</h1>
            <span class="sum">{{ playList.tracks.length }}首歌</span>
            <div class="song-num">
              <span style="margin-right: 5px">播放:</span>
              <span style="color: #c20c0c;font-weight: 600">{{ playList.playCount }}</span>
              <span>次</span>
            </div>
          </div>
          <div class="song-list-pre-cache">
            <div class="j-flag">
              <table class="m-table">
                <thead>
                <tr>
                  <th style="width: 12%;">
                  </th>
                  <th style="width: 48%;">
                    <div>标题</div>
                  </th>
                  <th style="width: 14%;">
                    <div>时长</div>
                  </th>
                  <th style="width: 26%;">
                    <div>歌手</div>
                  </th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(it,index) in playList.tracks" :key="it.id">
                  <td class="filst">
                    <div class="hd">
                      <span class="num-hd">{{ index + 1 }}</span>
                      <span class="bg-img"></span>
                    </div>
                  </td>
                  <td class="rank">
                    <div class="f-cb">
                      <router-link :to="{name:'SongDetail',params:{id:it.id}}">
                        <img :src="it.al.picUrl" alt="" class="img-data" v-if="index<=2">
                      </router-link>
                      <div class="texe">
                        <span class="bg-icon icon-img" :class="iconIndex===index?'active-bg':''"
                              @click="changeIcon(index,it)"></span>
                        <span class="txt">
                          <router-link :to="{name:'SongDetail',params:{id:it.id}}">{{ it.name }}</router-link>
                        </span>
                        <span class="mv" title="播放mv" v-if="it.mv" @click="toMv(it.mv)"></span>
                      </div>
                    </div>
                  </td>
                  <td class="s-fc3">
                    <span class="u-dur">{{ voiceDuration(it.dt) }}</span>
                    <div class="oper">
                      <a href="javascript:;" title="添加到播放列表" @click.prevent="addSongList(it)"></a>
                      <span class=" s-bg-11" title="收藏">收藏</span>
                      <span class=" u-icn-81" title="分享">分享</span>
                      <span class=" s-bg-12" title="下载">下载</span>
                    </div>
                  </td>
                  <td class="singer">
      <span class="text">
        <router-link :to="{name:'Work',params: {id:it.ar[0].id}}">{{ it.ar[0].name }}</router-link>
      </span>
                  </td>
                </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div style="height: 40px;"></div>
          <Comment :commentId="songId"></Comment>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header";
import SubNav from "@/components/SubNav";
import Footer from "@/components/Footer";
import Comment from "@/components/Comment";
import {mapGetters, mapState} from "vuex";


export default {
  name: "index",
  data() {
    return {
      activeIndex: null,
      activeIcon: 'icon-img',
      iconIndex: null,
      songId: ''
    }
  },
  components: {
    Header,
    SubNav,
    Footer,
    Comment
  },
  methods: {
    toMv(id) {
      this.$router.push({name: 'MvDetail', query: {id: id}})
    },
    addList(list) {
      this.$store.commit('track/SETMUSIC', list[0])
      this.$store.commit('track/addMusic', list)
    },

    toDetail(id) {
      this.$router.push({name: 'TopDetail', params: {id: id}})
    },
// 秒转换分钟00:00:00格式
    voiceDuration(voiceDuration) {  // 毫秒值
      if (voiceDuration != null) {
        var hours = parseInt((voiceDuration % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var minutes = '' + parseInt((voiceDuration % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = '' + parseInt((voiceDuration % (1000 * 60)) / 1000)
        if (minutes.length < 2) {
          minutes = '0' + minutes;
        }
        if (seconds.length < 2) {
          seconds = '0' + seconds;
        }
        if (hours > 0) {
          hours = '' + hours;
          if (hours.length < 2) {
            hours = '0' + hours;
          }
          return [hours, minutes, seconds].join(':');
        }
        return [minutes, seconds].join(':');
      }
    },
    changeIcon(index, i) {
      this.iconIndex = index
      this.activeIcon = 'active-bg'
      this.$store.commit('track/SETMUSIC', i)
    },
    addSongList(i) {
      this.$store.commit('track/ADDMUSICLIST', i)
    },

  },
  mounted() {
    this.songId = this.$route.params.id
    this.$store.dispatch('topSongList/getPlayList', this.$route.params.id)
    this.$store.dispatch('topList/getTop')
  },
  computed: {
    ...mapGetters('topList', ['ChineseTop', 'OtherTop']),
    ...mapState('topSongList', ['playList', 'songList', 'TopSongLists']),
  },
  created() {
    this.songId = this.$route.params.id
  }
}
</script>

<style scoped lang="less">
.toplist {
  width: 982px;
  margin: 0 auto;
  height: auto;
  overflow: hidden;
  border-right: 1px solid #D3D3D3;
  border-left: 1px solid #D3D3D3;
  display: flex;

  .sd3 {
    width: 240px;
    height: 100%;

    //border-right: 1px solid #D3D3D3;
    //border-left: 1px solid #D3D3D3;
    //border-bottom: 1px solid #D3D3D3;

    flex: 1;

    .minelst {
      width: 100%;
      margin-top: 40px;

      h2 {
        margin-left: 15px;
        font-family: simsun, \5b8b\4f53;
        font-weight: 800;
        font-size: 14px;
        color: #000;
      }

      .f-cb {
        width: 100%;
        margin-top: 15px;

        .bg-active {
          background-color: #E6E6E6;
        }

        li {
          width: 240px;
          height: 62px;
          display: flex;
          align-items: center;
          cursor: pointer;

          .item {
            width: 220px;
            height: 40px;

            .up {
              margin-bottom: 8px;
              margin-top: -2px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            p {

            }

            .left {
              width: 40px;
              height: 40px;
              float: left;
              margin-left: 20px;
              margin-right: 10px;

              img {
                width: 100%;
                height: 100%;
              }
            }
          }
        }
      }
    }
  }

  .yd3 {
    width: 740px;
    height: 100%;
    border-left: 1px solid #D3D3D3;
    border-bottom: 1px solid #D3D3D3;

    .g-wrap {
      width: 660px;
      height: 158px;
      margin: 0 auto;
      padding-top: 40px;


      .u-cover-rank {
        width: 158px;
        height: 158px;
        float: left;
        position: relative;

        img {
          width: 158px;
          height: 158px;
        }

        span {
          position: absolute;
          top: 3px;
          left: 3px;
          width: 150px;
          height: 150px;
          background: url("../../assets/coverall.png") no-repeat -230px -380px;
        }
      }

      .m-info {
        width: 473px;
        height: 114px;
        float: left;
        margin-top: 20px;
        margin-left: 25px;

        .hd {

          margin-bottom: 10px;

          h2 {
            font-size: 20px;
            font-weight: 400;
          }
        }

        .user {
          span {
            margin-left: 5px;
          }

          .day {
            margin-right: 5px;
          }

          i {
            width: 13px;
            height: 13px;
            overflow: hidden;
            vertical-align: center;
            display: inline-block;
            background: url("../../assets/icon.png") no-repeat -18px -682px;
          }
        }

        .btns {
          width: 483px;
          height: 31px;
          margin-top: 35px;

          .ply {
            background-repeat: no-repeat;
            background-image: url("../../assets/button2.png");
          }

          a {
            display: inline-block;
            float: left;

            i {
              margin-right: 5px;
              font-family: simsun, \5b8b\4f53;
              color: #666;
            }

            &:nth-child(1) {

              background-position: right -428px;

              i {
                padding: 0 10px 0 8px;
                display: inline-block;
                *display: inline;
                *zoom: 1;
                height: 31px;
                line-height: 31px;
                overflow: hidden;
                *line-height: 32px;
                vertical-align: top;
                text-align: center;
                cursor: pointer;
                color: #fff;
                background-position: 0 -387px;

                em {
                  float: left;
                  width: 20px;
                  height: 18px;
                  margin: 6px 2px 2px 0;
                  background-position: 0 -1622px;
                }
              }
            }

            &:nth-child(2) {
              margin-right: 5px;
              width: 31px;
              height: 31px;
              margin-left: -3px;
              padding-right: 0;
              background-position: 0 -1588px;
            }

            &:nth-child(3) {
              i {
                background-position: 0 -977px;
                float: left;
                height: 31px;
                line-height: 30px;
                min-width: 23px;
                cursor: pointer;
                padding: 0 7px 0 28px;
                border-top-right-radius: 5px;
                border-bottom-right-radius: 5px;
                border-right: 1px solid #C3C3C3;
              }
            }

            &:nth-child(4) {
              i {
                background-position: 0 -1225px;
                float: left;
                height: 31px;
                line-height: 30px;
                min-width: 23px;
                cursor: pointer;
                padding: 0 7px 0 28px;
                border-right: 1px solid #C3C3C3;
                border-top-right-radius: 5px;
                border-bottom-right-radius: 5px;
              }
            }

            &:nth-child(5) {
              i {
                background-position: 0 -2761px;
                float: left;
                height: 31px;
                line-height: 30px;
                min-width: 23px;
                cursor: pointer;
                padding: 0 10px 0 28px;
                border-right: 1px solid #C3C3C3;
                border-top-right-radius: 5px;
                border-bottom-right-radius: 5px;
              }
            }

            &:nth-child(6) {
              i {
                background-position: 0 -1465px;
                float: left;
                height: 31px;
                line-height: 30px;
                min-width: 23px;
                cursor: pointer;
                padding: 0 10px 0 28px;
                border-right: 1px solid #C3C3C3;
                border-top-right-radius: 5px;
                border-bottom-right-radius: 5px;
              }
            }
          }
        }
      }
    }

    .g-wrap12 {
      width: 740px;
      margin: 0 auto;
      border-right: 1px solid #D3D3D3;
      //border-left: 1px solid #D3D3D3;
      .title {
        width: 670px;
        height: 35px;
        margin: 0 auto;
        padding-top: 40px;
        line-height: 35px;
        border-bottom: 2px solid #C20C0C;

        .song-num {
          float: right;

          span {
            float: left;

          }
        }

        h1 {
          font-size: 20px;
          font-weight: 400;
          float: left;
        }

        .sum {
          float: left;
          margin-left: 20px;
        }
      }

      .song-list-pre-cache {
        border-right: 1px solid #D3D3D3;
        border-left: 1px solid #D3D3D3;
        border-bottom: 1px solid #D3D3D3;
        width: 670px;
        margin: 0 auto;

        .j-flag {
          width: 100%;

          table {
            border-collapse: collapse;
            border-spacing: 0;
            table-layout: fixed;
          }

          .m-table {
            width: 100%;

            tr {
              width: 100%;
              vertical-align: inherit;
              font-weight: bold;
              text-align: -internal-center;

              th {
                text-align: left;
                height: 38px;
                background-color: #f7f7f7;
                background-position: 0 0;
                background-repeat: repeat-x;
                border-right: 1px solid #DEDEDE;

                div {
                  height: 18px;
                  line-height: 18px;
                  padding: 8px 10px;
                  color: #666;
                  background-position: 0 -56px;
                }
              }
            }

            tbody {
              tr {
                &:nth-child(-n+3) {
                  .rank {
                    .txt {
                      a {
                        max-width: 195px !important;
                      }
                    }
                  }

                }

                &:hover .oper {
                  display: block !important;
                }

                &:hover .u-dur {
                  display: none;
                }

                .filst {
                  .hd {
                    height: 18px;


                    .num-hd {
                      color: #666;
                      width: 25px;
                      height: 18px;
                      display: inline-block;
                      font-weight: normal;
                      float: left;
                      line-height: 18px;
                      margin-left: 15px;
                      margin-right: 15px;
                    }

                    .bg-img {
                      float: left;
                      display: inline-block;
                      width: 16px;
                      height: 17px;
                      background: url("../../assets/icon.png") no-repeat -67px -283px;
                    }
                  }
                }

                .rank {
                  padding-top: 10px;
                  padding-bottom: 10px;

                  .f-cb {

                    display: flex;
                    align-content: center;

                    .texe {
                      margin-left: 10px;
                      display: flex;
                      align-items: center;
                      justify-content: center;

                      .bg-icon {
                        display: inline-block;
                        width: 17px;
                        height: 17px;
                        background-image: url("../../assets/table.png");
                        background-repeat: no-repeat;

                        &:hover {
                          background-position: -0px -128px;
                          cursor: pointer;
                        }
                      }

                      .icon-img {

                        background-position: -0 -103px;
                      }

                      .active-bg {
                        background-position: -20px -128px;
                      }

                      .mv {
                        width: 23px;
                        height: 17px;
                        margin: 1px 0 0 2px;
                        background-position: 0 -151px;
                        float: left;
                        background-image: url("../../assets/table.png");
                        overflow: hidden;
                        text-indent: -999px;
                        cursor: pointer;
                      }

                      .txt {
                        display: inline-block;
                        height: 20px;

                        a {
                          color: #333;
                          text-overflow: ellipsis;
                          white-space: nowrap;
                          max-width: 240px;
                          line-height: 20px;
                          display: inline-block;
                          overflow: hidden;
                          font-weight: normal;

                        }
                      }
                    }

                    a {
                      margin-left: 10px;

                      .img-data {
                        width: 50px;
                        height: 50px;
                      }
                    }

                  }
                }

                .s-fc3 {

                  .oper {
                    display: none;
                    float: left;

                    a {
                      width: 13px;
                      height: 13px;
                      float: left;
                      margin-top: 2px;
                      display: inline-block;

                      background: url("../../assets/icon.png") no-repeat 0 -700px;

                      &:hover {
                        background-position: -22px -700px;
                      }

                    }

                    .s-bg-11 {
                      float: left;
                      width: 18px;
                      height: 16px;
                      margin: 2px 0 0 4px;
                      overflow: hidden;
                      text-indent: -999px;
                      cursor: pointer;
                      background: url("../../assets/table.png") no-repeat 0 -174px;

                      &:hover {
                        background-position: -20px -174px;
                      }
                    }

                    .u-icn-81 {
                      float: left;
                      width: 18px;
                      height: 16px;
                      margin: 2px 0 0 4px;
                      overflow: hidden;
                      text-indent: -999px;
                      cursor: pointer;
                      background: url("../../assets/table.png") no-repeat 0 -195px;

                      &:hover {
                        background-position: -20px -195px;
                      }
                    }

                    .s-bg-12 {
                      float: left;
                      width: 18px;
                      height: 16px;
                      margin: 2px 0 0 4px;
                      overflow: hidden;
                      text-indent: -999px;
                      cursor: pointer;
                      background: url("../../assets/table.png") no-repeat -81px -174px;

                      &:hover {
                        background-position: -104px -174px;
                      }
                    }
                  }

                  .u-dur {
                    color: #666;
                    font-weight: normal;
                  }
                }

                .singer {
                  .text {
                    a {
                      color: #666;
                      font-weight: normal;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
